<template>
  <div class="string-concat-page">
    <div class="concat-container">
      <h1>字符串拼接（多语言）</h1>
      <el-form>
        <el-form-item label="输入字符串">
          <el-input
            v-model="inputString"
            type="textarea"
            :rows="10"
            placeholder="请输入要拼接的字符串，每行一个"
            class="text-input"
          />
        </el-form-item>

        <el-form-item label="编程语言">
          <el-select v-model="selectedLanguage" placeholder="请选择编程语言">
            <el-option
              v-for="lang in languages"
              :key="lang.value"
              :label="lang.label"
              :value="lang.value"
            />
          </el-select>
        </el-form-item>

        <div class="button-group">
          <el-button type="primary" @click="concatenateStrings">
            <el-icon><Connection /></el-icon>
            拼接字符串
          </el-button>
          <el-button type="success" @click="copyResult" :disabled="!result">
            <el-icon><DocumentCopy /></el-icon>
            复制结果
          </el-button>
          <el-button @click="clearAll">
            <el-icon><Delete /></el-icon>
            清空
          </el-button>
          <el-button @click="showDemo">
            <el-icon><Monitor /></el-icon>
            示例
          </el-button>
          <el-button type="warning" @click="goToHomepage">
            <el-icon><Back /></el-icon>
            返回
          </el-button>
        </div>

        <div class="result-area" v-if="result">
          <el-form-item label="结果">
            <el-input
              v-model="result"
              type="textarea"
              :rows="10"
              readonly
              class="result-input"
            />
          </el-form-item>
          <el-button type="primary" @click="downloadResult">
            <el-icon><Download /></el-icon>
            下载代码
          </el-button>
        </div>
      </el-form>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>支持多种编程语言的字符串拼接</li>
          <li>每行输入一个字符串，自动处理换行</li>
          <li>自动处理特殊字符和转义</li>
          <li>可以直接复制结果或下载代码文件</li>
          <li>支持JavaScript、Python、Java、C#、PHP等语言</li>
          <li>点击示例按钮查看使用示例</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Connection, DocumentCopy, Delete, Back, Monitor, Download } from '@element-plus/icons-vue'

const router = useRouter()
const inputString = ref('')
const result = ref('')
const selectedLanguage = ref('javascript')

const languages = [
  { label: 'JavaScript', value: 'javascript' },
  { label: 'Python', value: 'python' },
  { label: 'Java', value: 'java' },
  { label: 'C#', value: 'csharp' },
  { label: 'PHP', value: 'php' },
  { label: 'ASP', value: 'asp' }  // 添加 ASP 选项
]

const demoHtml = `<div id="app" class="body-container">
  <div class="spinner">
    <div class="spinner-container container1">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
    </div>
  </div>
</div>`

const concatenateStrings = () => {
  if (!inputString.value.trim()) {
    ElMessage.warning('请输入要拼接的字符串')
    return
  }

  const strings = inputString.value.split('\n').filter(s => s.trim())

  switch (selectedLanguage.value) {
    case 'javascript':
      result.value = 'var str = "";\n'
      strings.forEach(s => {
        result.value += `str += "${s.replace(/"/g, '\\"')}";\n`
      })
      break
    case 'python':
      result.value = "str= '''\n"
      strings.forEach(s => {
        result.value += `${s}\n`
      })
      result.value += "'''\n"
      break
    case 'java':
      result.value = 'String str = "";\n'
      strings.forEach(s => {
        result.value += `str += "${s.replace(/"/g, '\\"')}";\n`
      })
      break
    case 'csharp':
      result.value = 'string str = "";\n'
      strings.forEach(s => {
        result.value += `str += "${s.replace(/"/g, '\\"')}";\n`
      })
      break
    case 'php':
      result.value = '$str = "";\n'
      strings.forEach(s => {
        result.value += `$str .= "${s.replace(/"/g, '\\"')}";\n`
      })
      break
    case 'asp':  // 添加 ASP 的处理逻辑
      result.value = 'Dim str\nstr = ""\n'
      strings.forEach(s => {
        result.value += `str = str & "${s.replace(/"/g, '""')}"\n`
      })
      break
  }

  ElMessage.success('拼接成功')
}

const copyResult = () => {
  if (!result.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }

  navigator.clipboard.writeText(result.value)
    .then(() => ElMessage.success('已复制到剪贴板'))
    .catch(() => {
      fallbackCopyTextToClipboard(result.value)
    })
}

const clearAll = () => {
  inputString.value = ''
  result.value = ''
  selectedLanguage.value = 'javascript'
  ElMessage.success('已清空')
}

const showDemo = () => {
  inputString.value = demoHtml
  ElMessage.success('示例代码已加载')
}

const downloadResult = () => {
  if (!result.value) {
    ElMessage.warning('没有可下载的结果')
    return
  }

  const blob = new Blob([result.value], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `concatenated_string.${selectedLanguage.value === 'csharp' ? 'cs' : selectedLanguage.value}`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
  ElMessage.success('下载开始')
}

const fallbackCopyTextToClipboard = (text) => {
  const textArea = document.createElement('textarea')
  textArea.value = text
  document.body.appendChild(textArea)
  textArea.select()
  
  try {
    document.execCommand('copy')
    ElMessage.success('已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败，请手动复制')
  }
  
  document.body.removeChild(textArea)
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.string-concat-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  .concat-container {
    max-width: 800px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .el-form {
      .el-form-item {
        margin-bottom: 25px;

        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #4a5568;
          padding-bottom: 8px;
        }

        .text-input,
        .result-input {
          :deep(.el-textarea__inner) {
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            padding: 12px;
            border-radius: 8px;
            text-align: left;
            background-color: #f8fafc;
            border-color: #dcdfe6;
            
            &:focus {
              border-color: #409EFF;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }
          }
        }

        .el-select {
          width: 100%;
        }
      }
    }

    .button-group {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 20px 0;

      .el-button {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .el-icon {
          font-size: 16px;
        }
      }
    }

    .result-area {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px dashed #ddd;
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
        text-align: left;
      }

      ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        text-align: left;

        li {
          margin-bottom: 12px;
          line-height: 1.6;
          position: relative;
          padding-left: 18px;
          text-align: left;

          &:before {
            content: "•";
            color: #409EFF;
            font-size: 18px;
            position: absolute;
            left: 0;
            top: -2px;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .string-concat-page {
    padding: 10px;

    .concat-container {
      padding: 20px;
      width: 100%;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .button-group {
        flex-direction: column;
        gap: 10px;

        .el-button {
          width: 100%;
          margin: 0;
        }
      }

      .notes {
        padding: 15px;
        margin-top: 30px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
